<template>
    <div>
        <x-header :title="title"></x-header>
        <msg :title="msgTitle" :description="description" :icon="icon">
            <template slot="buttons">
                <x-button class="button" type="primary" link="BACK">确定</x-button>
            </template>
        </msg>
    </div>
</template>
<script>
import { XHeader, Msg, Divider, XButton } from "vux";

export default {
  components: {
    XHeader,
    Msg,
    Divider,
    XButton
  },
  data() {
    return {
      title: "支付成功",
      msgTitle: "支付成功！",
      description: "",
      icon: "success",
      tradeNo: ""
    };
  },
  created: function() {
    const vm = this;
    vm.tradeNo = vm.$route.params.tradeNo;
    vm.description =
      "您已成功支付订单：" +
      vm.$route.params.tradeNo +
      "<br>" +
      vm.$route.params.content +
      "<br>感谢您的支持";
  }
};
</script>
<style scoped>
.button {
  margin-top: 15px;
  margin-bottom: 10px;
  width: 80%;
}
</style>